﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <link href="design/semantic.min.css" rel="stylesheet" />
    <link href="design/cocozil.css" rel="stylesheet" />
    <script src="design/semantic.min.js"></script>
    <title>Cocozil - Discover & Taste Mauritius</title>

    <style type="text/css">
        .backgroundgradient {
            background-image: -moz-linear-gradient(top, #bae2e3 0%, #bae2e3 0%,#ffffff 100%);
            background-image: linear-gradient(top, #bae2e3 0%, #bae2e3 0%,#ffffff 100%);
            background-image: -webkit-linear-gradient(top, #bae2e3 0%, #bae2e3 0%,#ffffff 100%);
            background-image: -o-linear-gradient(top, #bae2e3 0%, #bae2e3 0%,#ffffff 100%);
            background-image: -ms-linear-gradient(top, #bae2e3 0%, #bae2e3 0%,#ffffff 100%);
            background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%,#bae2e3), color-stop(0%,#bae2e3),color-stop(100%,#ffffff));
        }
    </style>
    <link href="design/slick/slick.css" rel="stylesheet" />
    <link href="design/slick/slick-theme.css" rel="stylesheet" />
</head>
<body>
    <div class="ui page grid">
        <div class="ui page grid">
            <header class="ui">
                <nav class="ui grid">
                    <div class="ui seven wide column">
                        <img class="ui small image" alt="Cocozil" src="design/images/cocozil-logo.png" />
                    </div>
                    <div class="ui nine wide bottom aligned right aligned column">
                        <div class="ui remote search">
                            <div class="ui icon input">
                                <input type="text" placeholder="search..." class="prompt" />
                                <i class="search icon"></i>
                            </div>
                        </div>
                    </div>
                </nav>
            </header>
            <hr class="ui divider"/>
            <section class="ui grid">
                <div class="ui column">
                    <article class="content ui ">
                        <div class="carousel">
                            <div>
                                <a href="flan.html"><h1>Flan Caramel</h1><img src="http://1.bp.blogspot.com/-iSZ81CsbuY8/UU-XiD1PLcI/AAAAAAAAAYs/_5jUTGBA7sE/s1600/www.cocozil.com-flancaramel7.jpg" style="max-width:100%;max-height:100%;"></a>
                                <h4>Caramel pudding is a custard dessert with a layer of soft caramel on top, as opposed to crème brûlée, which is pudding with a hard caramel top. The dish is eaten throughout the world.</h4>
                            </div>
                            <div><a href="boulettes.html"><h1>Boulettes Magique</h1><img src="http://3.bp.blogspot.com/-6cbVLjKb3RE/UJp963BiiqI/AAAAAAAAASE/E14VCZN5RzM/s1600/IMG_20121006_134946.jpg" style="max-width:100%;max-height:100%;"></a></div>
                            <div><a href="khaja.html"><h1>Khaja Mere Khaja </h1><img src="http://3.bp.blogspot.com/-FDiZZYsyIhM/UCqm6kFqNwI/AAAAAAAAAHE/wOvnEj7VrLs/s1600/khaja-www.cocozil.com.jpg" style="max-width:100%;max-height:100%;"></a></div>
                        </div>

                    </article>
                </div>                
            </section>

            <hr class="ui divider" />

            <section class="ui grid">
                <div class="ui four column row">
                    <div class="column">col 1</div>
                    <div class="column">col 2</div>
                    <div class="column">col 3</div>
                    <div class="column">col 4</div>
                </div>
            </section>
            
            <footer class="ui grid">
                <hr class="ui divider"/>
                <div class="row">
                    <div class="column">
                        <span>©2015 code-labs.ca</span>
                    </div>
                </div>
            </footer>
        </div>
    </div>
                    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
                    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
                    <script src="design/slick/slick.min.js"></script>

                    <script type="text/javascript">
                        $(document).ready(function () {
                            $('.carousel').slick({
                                dots: true,
                                infinite: true,
                                cssEase: 'linear',
                                autoplay: true,
                                autoplaySpeed: 2000,
                                slidesToScroll: 1
                            });
                        });
                    </script>
</body>
</html>